<template>
  <div>
    <ul>
      <li>id:{{ messageDetail.id }}</li>
      <li>title:{{ messageDetail.title }}</li>
      <li>content:{{ messageDetail.content }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      messageDetail: {},
      allMessage: [
        {
          id: 1,
          title: 'message001',
          content: 'message001 content...'
        }, {
          id: 2,
          title: 'message002',
          content: 'message002 content...'
        }, {
          id: 3,
          title: 'message003',
          content: 'message003 content...'
        }
      ]
    }
  },
  mounted() {
    // 获取路由中的id,id有可能是文本 这里做一次转换
    const id = this.$route.params.id * 1
    // const id = this.$route.query.id * 1
    this.findById(id)
  },
  methods: {
    findById(id) {
      // 掉后台的接口 更加id进行查询  这里用定义好的集合
      setTimeout(() => {
        const allMsg = this.allMessage
        this.messageDetail = allMsg.find(item => item.id === id);
      }, 500)
    }
  },
  watch: {
    // 因为组件没有发生改变 同一个组件mounted 只会执行一次 这里需要监视路由参数（params）的变化
    $route: function (value) {
      const id = value.params.id * 1
      // const id = value.query.id * 1
      this.findById(id)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
